<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Monitor testPage</title>
  <style>
  button{
    width: auto;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    outline: none;
    border-radius: 3px;
    background: linear-gradient(180deg, #648cff 0%, #3973ff 100%);
    color: #fff;
  }
  </style>
</head>
<body>
  <h1>Monitor testPage</h1>

  <!-- ajax请求错误 -->
  <p>ajax请求错误</p>
  <button class="err-ajax-request">ajax请求错误</button>
  <button class="servererr-ajax-request">服务端错误</button>
  <button class="fail-ajax-request">ajax失败</button>
  <button class="timeout-ajax-request">ajax超时</button>
  <button>jsonp请求失败</button>
  <hr>

  <!-- js执行错误 -->
  <p>js执行错误</p>
  <button class="js-running-error">js执行错误</button>
  <hr>

  <!-- Promise 错误 -->
  <p>Promise 错误</p>
  <button class="promise-error">Promise 错误</button>
  <hr>

  <!-- js内存泄漏 -->
  <!-- <p>js内存泄漏</p>
  <button>js内存泄漏</button>
  <hr> -->

  <!-- 资源没有加载 -->
  <p>资源没有加载</p>
  <button class="err-js-load">没有加载javascript</button>
  <button class="err-css-load">没有加载css</button>
  <button class="err-image-load">没有加载image</button>
  <button class="err-iframe-load">没有加载iframe</button>
  <hr>

  <!-- 第三方资源错误 -->
  <p>第三方资源错误</p>
  <button class="other-resource-error">第三方资源错误</button>
  <hr>

  <!-- destory -->
  <p>销毁实例</p>
  <button class="destory">销毁实例</button>
  <hr>


  <!-- rrweb 重播 -->
  <p>rrweb 重播</p>
  <button class="rrweb">rrweb 重播</button>
  <hr>

  <!-- 注意这里必须加 crossorigin="anonymous" 否则在引入的时候会因为是第三方资源无法收集完整报错信息 -->
  <script crossorigin="anonymous" src="../dist/js/monitor.js"></script>
  <script src="./createError.js"></script>
  <script>
    var config = {
      // name: 'test',
      https: false,
      post: false,
      url: "localhost:4000/error",
      record: true,
    };

    initMonitor(config, function(monitor) {
      window.monitor = monitor;
    });

    window.onerror = function(err, detail) {
      console.log(111);
    }

  </script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"/>
  <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
  <script>
    /**
     * rrweb 回播
     */
    var rrweb = document.getElementsByClassName("rrweb")[0];
    rrweb.onclick = function () {
      var events = window.monitor._getRecord();
      console.log(events);

      new rrwebPlayer({
        target: document.body,
        data: { events },
      });
    }
  </script>
</body>
</html>